<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小米官网</title>

<script  src="jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     var b=0;
     var Time;
     function imgcha(){ $(".list li").eq(b).addClass("active").siblings().removeClass("active");
     $(".pic img").eq(b).stop(true).fadeIn().siblings().hide(); };
   $(".list li").hover(function() {
   b =$(this).index();
   	
   imgcha();
  
     });
   $(".right").click(function(){
   	if(b<4){
   	b++;}else{b=0};
   
    imgcha();
   });
   $(".left").click(function(){
   		if(b<4){
   	b++;}else{b=0};
   
    imgcha();
   });
  
  function play(){Time=setInterval(function(){if(b<4){
   	b++;}else{b=0}; imgcha();},2000);
};
 play();


 $(".icon").hover(function() {
clearInterval(Time),
function(){play();};});



});




</script>


	<style type="text/css">
		#box{
			background: #313030;
			width: 100%;
			height: 40px;
			margin: 0px;
		    padding: 0;
			}
			div,body,ul{
				margin: 0px;
				padding: 0px;
				font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
						}
		#box ul{
			 width: 100%;
			height: 40px;
		}	
	   #box ul li {
              color: #FFFAFA;
         	  border:0px solid #D8D4D4;
         	  line-height: 40px;
               margin:0px;
               padding: 0 10px;
               padding-left: 0px;

               text-align:center;
               float: left;
              list-style-type: none; 
              }
        .you{
                padding: 80px;
                line-height: 40px;
                left: 1000px;
           
             }
         
      .sep{
      	margin: 0 .5em;
       color: #424242;
       line-height: 40px;
      }
        
    #box li a{
         		width:100%;/*设置元素宽为80px*/
                height:15px;/*设置高度为28px*/
               color:#AEAAAA;/*文字颜色是白色*/
              font-size:12px;/*用12号字*/
              text-decoration:none; /*去掉下划线*/
              
              text-decoration:none;
                         
                      }   
     #box ul li a:hover{color:#fff;}
    
    .xiao {width: 100%;
           height: 100px;
           float: left;
            font: 16px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
          
      }
   
     .xiao1{width: 55px;
           height:55px;
      padding:19px 10px 19px 80px;
      	     float: left;}
     .xiao2 ul { width:850px;/*设置元素宽为80px*/
                height:88px;/*设置高度为28px*/
     	        float: left;
    	       font: 16px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
           
              list-style-type: none; 
             
               text-align:center;
               line-height: 80px;
               position: relative;
             z-index: 10;
            margin: 0;
           padding: 12px 0 0 1px;
    } 

    .xiao2 ul li{ 
     	        float: left;
               padding:0px 20px ;
     	       }
   .xiao3{
   	       width: 250px;
           height: 50px;
           float: right;
           padding:20px 90px 20px 10px;
           
        
       
}

.xiao3  input{width: 206px;
           height: 50px;
       text-align:right;
   
display: inline-block;
margin-left: 5px;
padding:0px 10px 0px 0px;
font-size: 12px;

color: #757575;


transition: all .2s;}
.xiao3 img{width: 50px;
         height: 52px;
        float:left;
        padding: 0px;
        margin: 0px;
       
        border: 1px solid  #A1A0A0;



 
          
         }


    .mi{width: 1226px;
    	height: 460px;
    	padding:100px 80px 0px 80px; 

    }      

    .con{
    	width: 1226px;
    	height: 460px;
    	border: 1px solid #12F5D7;
    	position: relative;/*相对定位，参照物*/

    } 
    .pic{width: 1226px;
    	height: 460px;

    }  
    .pic img{position: absolute;/*绝对定位*/
             display: none;

    }

    .list{ list-style-type: none; 
    	   width:400px;
    	   height: 10px;
    	   background: rgba(0, 0, 0,0);/*使用透明色，最后一个属性中0表示全透明，1表示不透明，小数表示半透明。border*/
             padding:1px 1px;
             position: absolute;
             bottom: 20px;
             left: 1100px ;
    	        }
     .list li{float: left;
               width: 8px;
               height: 8px;
               border:1px solid #fff;
               border-radius: 6px;
               margin: 1px  3px;
               background: #A09E9E;}
      
     .list .active{
     	background: #FFFFFF;
     }
               
     .but li{width: 41px;
              height: 70px;
              list-style: none;
              font-size: 40px;
              text-align: center;
              line-height: 70px;
              color:#8A8888;
              position: absolute;
              top: 180px;
             display: none;
             cursor: pointer;/*改为手指*/
      }  
      .but.left{ left: 20px; }
      .but .right{right:10px;}
     .con:hover .but li{display: block;}
      .but li:hover{background: rgba(0, 0, 0, 0.5);color:#FFFFFF;}

	</style>








</head>


<body>

	<div id="box">
	
       <ul >
      <li><a href="http://www.mi.com/">小米商城 <span class="sep">|</span>
</a></li>
      
      <li><a href="http://www.miui.com/">MIUI <span class="sep">|</span>
</a></li>
      
      <li><a href="http://www.miliao.com/">米聊 <span class="sep">|</span>
</a></li>
      
      <li><a href="http://game.xiaomi.com/">游戏 <span class="sep">|</span>
</a></li>
      
      <li><a href="http://www.duokan.com/">多看阅读 <span class="sep">|</span>
</a></li>
      
      <li><a href="https://i.mi.com/">云服务 <span class="sep">|</span>
</a></li>
      
      <li><a href="https://jr.mi.com">金融 <span class="sep">|</span>
</a></li>
      
      <li><a href="//www.mi.com/c/appdownload">小米网移动版 <span class="sep">|</span>
</a></li>
      
      <li><a href="//static.mi.com/feedback/">问题反馈
      <span class="sep">|</span>
      </a></li>
      <li><a href="#">Select Region</a></li>

     <li class="you"><a href="#">登录</a></li>
      <li class="you"><a href="#">注册</a></li>
        </ul>
  
</div>
    

<div class="xiao">
     <div class="xiao1">
    
    <a href="http://www.mi.com/"><img src="F:\网站\图片/logomi.png"></a>

     </div>
     <div  class="xiao2">
    	<ul>
    		<li>小米手机</li>
    		<li>红米</li>
    		<li>平板 · 笔记本</li>
    		<li>电视</li>
    		<li>盒子 · 影音</li>
    		<li>路由器</li>
    		<li>智能硬件</li>
    		<li>服务</li>
    		<li>社区</li>
    	</ul>
     </div>
       <div class="xiao3">
      <form >
       <table cellpadding="0px" margin="0px">
       <tr>
         <td>
    	<input type="text" name="sousuo" value="红米Note4   小米笔记本Air">
    	</td>
    
         <td>
        	<a href="http://www.mi.com/"><img src="F:\网站\图片/搜索.png"></a>
        </td>
       </table>
       </form>

        </div>
   </div>

    <div class="mi">
         <div class="con"><!--图片区*/-->
         <div class="pic"> 
    	<a href="http://www.mi.com/"><img src="F:\网站\图片/a.jpg" style="display:block;"></a>
    	<a href="http://www.mi.com/"><img src="F:\网站\图片/b.jpg"></a>
    	<a href="http://www.mi.com/"><img src="F:\网站\图片/c.jpg"></a>
    	<a href="http://www.mi.com/"><img src="F:\网站\图片/d.jpg"></a>
    	<a href="http://www.mi.com/"><img src="F:\网站\图片/e.jpg"></a>
    	 </div>
<!--选项卡*/-->
    	   <ul class="list">
    	 	 <li class="active"></li>
    	 	 <li></li>
    	 	 <li></li>
    	 	 <li></li>
    	 	 <li></li>
    	   </ul>
    	   
<!--左右选项卡*/--> 	
    	   <ul class="but" onselectstart="return false">
               <li class="left"> &lt </li>
               <li class="right">&gt</li>
    	   </ul >
    	 
       	
       </div>
    </div>
  

</body>
</html>